<!-- 模块说明 -->
<template>
  <el-backtop :right="50" :bottom="50" />
  <div style="padding: 20px">
    <el-card class="box-card" style="margin-right: 25px; position: fixed">
      <h1 style="margin-bottom: 20px">{{ store.state.pdf.pdf.name }}</h1>
      <p>总分：{{ store.state.pdf.pdf.score }}分</p>
      <p>时间：{{ store.state.pdf.pdf.suggestTime }}分钟</p>
      <p style="color: #f00; font-size: 16px">得分：{{ res }}</p>
      <p
        style="
          border-bottom: 1px solid #000;
          padding-bottom: 10px;
          margin-bottom: 10px;
        "
      >
        提交人：{{ "student" }}
      </p>
      <div
        class="box"
        style="
          display: flex;
          border-bottom: 1px solid #000;
          padding-bottom: 10px;
        "
      >
        <div v-for="(item, i) in titleList" @click="navigate(item, i)">
          <p
            v-if="
              item.name !== '简答题' &&
              item.questionItems[0].correct !==
                item.questionItems[0].correctArray
            "
            style="
              width: 30px;
              height: 30px;
              margin: 5px;
              line-height: 30px;
              text-align: center;
              background-color: var(--el-color-danger-light-9);
              color: var(--el-color-danger);
              border: 1px solid var(--el-color-danger);
              border-radius: 5px;
              cursor: pointer;
            "
          >
            {{ i + 1 }}
          </p>
          <p
            v-else-if="
              item.name !== '简答题' &&
              item.questionItems[0].correct ==
                item.questionItems[0].correctArray
            "
            style="
              width: 30px;
              height: 30px;
              margin: 5px;
              line-height: 30px;
              text-align: center;
              background-color: var(--el-color-success-light-8);
              color: var(--el-color-success);
              border: 1px solid var(--el-color-success);
              border-radius: 5px;
              cursor: pointer;
            "
          >
            {{ i + 1 }}
          </p>
          <p
            v-if="item.name == '简答题'"
            style="
              width: 30px;
              height: 30px;
              margin: 5px;
              line-height: 30px;
              text-align: center;
              background-color: var(--el-color-warning-light-9);
              color: var(--el-color-warning);
              border: 1px solid var(--el-color-warning);
              border-radius: 5px;
              cursor: pointer;
            "
          >
            {{ i + 1 }}
          </p>
        </div>
      </div>
      <el-button style="margin-top: 15px; margin-left: 80px" @click="submit"
        >提交</el-button
      >
    </el-card>

    <!-- <el-card ref="cardBox" class="box-card1"> -->
    <div
      style="
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
        width: 1340px;
        margin-left: 290px;
        padding: 20px;
      "
    >
      <div
        ref="text"
        v-for="(o, i) in titleList"
        :key="o"
        class="text item"
        style="
          font-size: 16px;
          padding-bottom: 30px;
          border-bottom: 1px solid #000;
          position: relative;
        "
      >
        <p>{{ i + 1 }}&nbsp;&nbsp;{{ o.name }}</p>
        <p>题目：{{ o.questionItems[0].shortTitle }}</p>
        <p>分数：{{ o.questionItems[0].score }}</p>
        <div style="display: flex">
          <p
            style="font-size: 16px; margin-right: 20px"
            v-for="(item, i) in o.questionItems[0].item"
          >
            {{ i + 1 }}：&nbsp;{{ item }}
          </p>
        </div>
        <p>标答：{{ o.questionItems[0].correct }}</p>
        <p>用户答案：{{ o.questionItems[0].correctArray }}</p>
        <div class="demo-rate-block">
          <el-rate v-model="o.questionItems[0].difficult" />
        </div>
        <div
          v-if="
            o.name !== '简答题' &&
            o.questionItems[0].correct !== o.questionItems[0].correctArray
          "
          style="
            padding: 5px;
            background-color: var(--el-color-danger-light-9);
            color: var(--el-color-danger);
            border: 1px solid var(--el-color-danger);
            width: 40px;
            text-align: center;
            border-radius: 5px;
          "
        >
          错误
        </div>
        <div
          v-else-if="
            o.name !== '简答题' &&
            o.questionItems[0].correct == o.questionItems[0].correctArray
          "
          style="
            padding: 5px;
            background-color: var(--el-color-success-light-8);
            color: var(--el-color-success);
            border: 1px solid var(--el-color-success);
            width: 40px;
            text-align: center;
            border-radius: 5px;
          "
        >
          正确
        </div>
        <div
          v-if="o.name == '简答题'"
          style="
            padding: 5px;
            background-color: var(--el-color-warning-light-9);
            color: var(--el-color-warning);
            border: 1px solid var(--el-color-warning);
            width: 50px;
            text-align: center;
            border-radius: 5px;
            margin-bottom: 10px;
          "
        >
          待批改
        </div>
        <el-input-number
          v-if="o.name == '简答题'"
          v-model="num"
          :min="1"
          :max="o.questionItems[0].score"
          @change="handleChange"
        />
        <!-- <br> -->
        <el-button
          @click.once="btn(o)"
          v-if="
            o.questionItems[0].correct == o.questionItems[0].correctArray ||
            o.name == '简答题'
          "
          style="
            position: absolute;
            top: 0;
            right: 50px;
            border: 0;
            height: 80px;
          "
        >
          老师请核对：
          <el-icon style="font-size: 70px"><Check /></el-icon>
        </el-button>
      </div>
    </div>
    <!-- </el-card> -->
    <el-dialog v-model="dialogVisible" title="考试结果" width="30%">
      <span style="color: #f00">总分：{{ res }}</span>
      <template #footer>
        <el-button type="primary" @click="submitTo"> 提交 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Check } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useStore } from "vuex";
import router from "../../router";
const dialogVisible = ref(false);
const store = useStore();
const num = ref(1);
const text = ref();
const titleList = store.state.pdf.pdf.titleItems;
const res = ref();
const navigate = (item: any, i: any) => {
  // console.log(text.value[i]);
  console.log(text.value[i].offsetTop);
  // window.scrollTo(0, text.value[i].offsetTop);
  if (text.value[i].offsetTop == 100) {
    window.scrollTo(0, 0);
  } else {
    window.scrollTo(0, text.value[i].offsetTop);
  }
};
const handleChange = () => {
  console.log(num.value);
};
const btn = (o: any) => {
  store.commit(
    "pdf/SET_SUM",
    o.name !== "简答题" ? o.questionItems[0].score : num.value
  );
};
const submit = () => {
  res.value = store.state.pdf.sum.reduce(
    (total: any, item: any) => total + parseInt(item),
    0
  );
  dialogVisible.value = true;
  store.commit("pdf/SET_PRICE", res);
};
const submitTo = () => {
  dialogVisible.value = false;
  router.push("/answer");
};
</script>
<style lang="scss" scoped>
.text {
  font-size: 14px;
  p {
    line-height: 30px;
  }
}

.item {
  margin-bottom: 18px;
}
.el-card {
  overflow: auto;
}
.box-card {
  width: 270px;
  font-size: 14px;
  height: calc(100vh - 120px);
  p {
    line-height: 25px;
  }
}
.box-card1 {
  width: 1400px;
  font-size: 14px;
  height: calc(100vh - 120px);
  p {
    line-height: 25px;
  }
}
.active {
  background-color: var(--el-color-success-light-8);
  color: var(--el-color-success);
  border: 1px solid var(--el-color-success);
}
</style>
